• 今天是鐵人賽完賽後的第一天，也就是第31天，今天的心情比較輕鬆，鬆到我一直想偷懶休息，不行，咱們還是來寫寫文章，分享心得，繼續上工!

先來複習一下JS Array的push/pop及shift/unshift

const data = [1,2,3];
data.push(4); // Array最後方加入參數:[1,2,3,4]
data.unshift(0); // Array最前方加入參數:[0,1,2,3,4]
data.pop();// 取出Array中最後一個數值: 4 
data.shift();// 取出Array中最前面的一個數值: 0

• 上面這個例子，大家應該不陌生，熟悉的話，對於我們要介紹的startWith及endWith就能快速理解啦!

需要複習的夥伴，可以參考tsuifei這篇好文: JS 從陣列 Array 的開頭新增元素

startWith & endWith

• startWith
  
  圖片來源-RxJS官網: startWith

• endWith
  
  圖片來源-RxJS官網: endWith

解析

• 從彈珠圖來看:

1. startWith內的數值，會早於observable source之前，以第一優先順序發送。

適合用於顯示狀態，來說明observable已啟動訂閱。

2. endWith內的數值，會在observable source結束之後，以最後一個順序發送。

適合與takeUntil使用，來顯示RxJS的執行狀態已結束。

case1: 使用訊息來顯示observable的狀態

stackblitz

import { endWith, from, startWith } from 'rxjs';

from([1, 2, 3, 4])
  .pipe(
    startWith('start!'), 
    endWith('end...'))
  .subscribe(console.log);

• 印出結果

注意，startWith及endWith擺放的順序很重要

• 使用startWith及endWith在pipe之中擺放的順序很重要，我們先來看下面這個例子:
  stackblitz

import { endWith, from, startWith } from 'rxjs';

from([1, 2, 3, 4])
  .pipe(
    startWith('start!'),        //<-- startWith放在上面
    map((d: number) => d * 10), //<-- 加入一個map處理數值
    endWith('end...')
  )
  .subscribe(console.log);

解析

• 有鑑於此，我們建議將startWith及endWith放在pipe的最底部，避免發生不可預期的問題!

✍Recap

• startWith內的數值，會早於observable source之前，以第一優先順序發送。

適合用於顯示狀態，來說明observable已啟動訂閱。

• endWith內的數值，會在observable source結束之後，以最後一個順序發送。

適合與takeUntil使用，來顯示RxJS的執行狀態已結束。

• startWith及endWith建議放在pipe最後方，以免發生不可預期的現象!